<template>
  <div>
    <div class="total">
      <div class="competitionTotal totalBox">
        <p style="color: rgb(103, 24, 37)">
          <span>20</span>
          <span>赛事总数</span>
        </p>
        <p style="color: rgb(240, 182, 91)">
          <span>18</span>
          <span>已完结赛事</span>
        </p>
        <p style="color: rgb(183, 51, 109)">
          <span>2</span>
          <span>进行中赛事</span>
        </p>
      </div>
      <div class="taskTotal totalBox">
        <p style="color: rgb(103, 24, 37)">
          <span>20</span>
          <span>任务总数</span>
        </p>
        <p style="color: rgb(240, 182, 91)">
          <span>18</span>
          <span>已完结任务</span>
        </p>
        <p style="color: rgb(183, 51, 109)">
          <span>2</span>
          <span>进行中任务</span>
        </p>
      </div>
    </div>
    <div class="statistics">
      <bar-chart
        ref="chart"
        :width="'8.9rem'"
        :height="'2.6rem'"
        :yData="yData"
        :xData="xData"
        :title="'2023年度数据统计'"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import barChart from "./institution-barChart.vue";
import { reactive } from "vue";
//表格横纵轴数据
let yData = reactive([
  "2015年",
  "2016年",
  "2017年",
  "2018年",
  "2019年",
  "2020年",
  "2021年",
  "2022年",
  "2023年",
  "2024年",
]);
let xData = reactive([
  {
    // name: "PC端",
    type: "bar",
    data: [
      18203, 23489, 29034, 104970, 131744, 630230, 29034, 104970, 131744,
      630230,
    ],
  },
]);
</script>

<style lang="scss" scoped>
.total {
  display: flex;
  .totalBox {
    display: flex;
    margin: 0.1rem 0.2rem;
    border: 1px solid rgb(153, 153, 153);
    box-shadow: 0.004rem 0.01rem 0.02rem 0.012rem rgb(153, 153, 153);
    width: 3rem;
    padding: 0.24rem 0;
    p {
      width: 33.33%;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-weight: bold;
      span:first-child {
        font-size: 0.16rem;
        line-height: 0.2rem;
      }
      span:last-child {
        font-size: 0.1rem;
        line-height: 0.18rem;
      }
    }
  }
}
.statistics{
  margin-top: 0.4rem;
}
</style>
